<template>
  <div class="t-title">
    <i v-if="icon" class="icon" :style="iconFontSzie" :class="typeClass"></i>
    <div v-else class="line" :style="'height:'+ fontSize +'px'" :class="typeClass"></div>
    <div class="text" :style="textFontSize">
      <slot />
      <div v-if="description" class="description type-info-dark">{{description}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: "", //使用element 的图标
    },
    type: {
      type: String,
      default: "primary", //info primary warning  success   error primary
    },
    iconSize:{
      type: [String,Number],
      default: 20, 
    },
    fontSize:{
      type: [String,Number],
      default: 14, 
    },
    description:{
      type: String,
      default: "",
    }
  },
  computed:{
    textFontSize(){
      return  `font-size: ${this.fontSize}px`
    },
    iconFontSzie(){
      return  `font-size: ${this.iconSize}px`
    },
    typeClass(){
      if(this.icon){
        return ` t-title-${this.type}-icon  ${this.icon}`
      }else{
        return ` t-title-${this.type}`
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.t-title {
  display: flex;
  align-items: center;
  &-info {
    background: $type-info;
     &-icon{
      color: $type-info;
    }
  }
  &-warning {
    background: $type-warning;
    &-icon{
      color: $type-warning;
    }
  }
  &-success {
    background: $type-success;
    &-icon{
      color: $type-success;
    }
  }
  &-error {
    background: $type-error;
    &-icon{
      color: $type-error;
    }
  }
  &-primary {
    background: $type-primary;
    &-icon{
      color: $type-primary;
    }
  }
  .text {
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-weight: bold;
    color: $main-text-color;
    .description{
      margin-left: 50px;
      font-weight: normal;
      font-size: 10px;
    }
  }
  .line {
    width: 3px;
    border-radius: 20px;
  }
}
</style>